<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'settings.display.wallpaper' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
      [disabled]="clicked"
    ></button>
  </div>
  <div class="modal-body">
    <div class="text-center mb-3">
      <i class="fas fa-image primary-text" style="font-size: 75px"></i>
    </div>
    <ul class="mb-3">
      <li>{{ 'settings.display.wallpaper_intro' | translate }}</li>
      <li>{{ 'settings.display.wallpaper_rule' | translate: { maxFileSizeText: maxFileSizeText } }}</li>
      <li>{{ 'settings.display.wallpaper_rule2' | translate }}</li>
    </ul>
    <div class="mb-3 text-center">
      @if (wallpaperUrl) {
      <div class="position-relative d-inline-block">
        <img
          [src]="wallpaperUrl"
          class="img-fluid rounded mx-auto d-block"
          alt="Current Wallpaper"
          style="height: 200px"
        />
        <button
          class="btn btn-danger position-absolute"
          style="top: 10px; right: 10px"
          (click)="clearWallpaper()"
          [attr.aria-label]="'form.button_delete' | translate"
        >
          <i class="fas fa-trash"></i>
        </button>
      </div>
      } @else {
      <div class="gradient anim rounded" style="height: 200px; width: 350px; margin: 0 auto"></div>
      }
    </div>
    <div class="mb-0">
      <input
        type="file"
        id="wallpaper"
        class="form-control"
        #wallpaperInput
        (change)="onFileChange($event.target.files)"
        accept="image/*"
      />
    </div>
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [disabled]="clicked"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end">
      <button
        type="button"
        class="btn btn-primary"
        data-bs-dismiss="modal"
        (click)="saveWallpaper()"
        [disabled]="(wallpaperUrl === originalWallpaperUrl) || clicked"
      >
        {{ 'form.button_save' | translate }}
      </button>
    </div>
  </div>
</div>
